<template>
  <page-wrap :showTop="false" hideTab bg-color="#fff" :customWrapStyle="customWrapStyle" back>
    <view class="Wrapper" :style="'padding-top:' + navHeight + 'px;height:calc(100vh)'">
      <view class="Title">选择专业</view>
      <view class="search">
        <u-search placeholder="请输入你的专业名称" class="library-u-search" v-model="keyword" height="80" bg-color="#F7F8FA;"
          :search-icon="searchIcon" @change="handleSearch" @search="handleSearch($event, 'enter')"
          @custom="handleSearch" maxlength="20" :show-action="false"></u-search>
      </view>
      <view class="Content" v-if="!(isSearching && keyword )">
        <view class="ContentInner">
          <scroll-view class="ContentLeft" :scroll-y="true" scroll-with-animation
            :style="'height:calc(100vh - '+(navHeight+106+116)+'px)'">
            <view class="contentLeftInner">
              <view :class="{'ContentLeftItem':true,'active':(selectedLeftDepId==leftItem.depId)}"
                v-for="(leftItem,leftIndex) in leftList" :key="leftIndex" @click="handleLeftClick(leftItem,leftIndex)">
                {{leftItem.depName}}</view>
            </view>
          </scroll-view>
          <scroll-view class="ContentRight" :scroll-y="true" scroll-with-animation
            :style="'height:calc(100vh - '+(navHeight+106+116)+'px)'">
            <view :class="{'ContentRightItem':true,'active':(selectedRightDepId==rightItem.depId)}"
              v-for="(rightItem,rightIndex) in rightList" :key="rightIndex">
              <view class="ContentRightItemTitle">{{ rightItem.depName }}</view>
              <view class="ContentRightItemContent">
                <view :class="{'ContentRightItemContentItem':true,'active':(selectedRightDepId==contentItem.depId)}"
                  v-for="(contentItem,contentIndex) in rightItem.children" :key="contentIndex"
                  @click="handleRightClick(contentItem,rightItem)">
                  {{contentItem.depName}}
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="bottomButton">
          <view class="confirmButton" @click="handleConfirmClick">选好了</view>
        </view>
      </view>
      <scroll-view :scroll-y="true" class="searchResult" v-if="isSearching && keyword ">
        <view class="resultList" v-if="searchResultList.length">
          <view class="resultItem" v-for="(item, index) in searchResultList" :key="index"
            @click="handleResultClick(item)">
            <view class="resultTitle">
              <template v-for="(_item, _index) in item.filterList">
                <text v-if="_item.deep" class="light" :key="_index">{{
                    _item.val
                  }}</text>
                <template v-else>{{ _item.val }}</template>
              </template>
            </view>
            <view class="resultDesc">{{ item.topName ? item.topName + " - " : ""
                }}{{ item.parentName ? item.parentName : "" }}</view>
          </view>
        </view>
        <view class="noneResult" v-else>
          <image :src="emptyImg" class="empty_image"></image>
          <view class="empty-title">
            暂无匹配专业，请重新输入专业关键字
          </view>
        </view>
      </scroll-view>
    </view>
  </page-wrap>
</template>

<script>
import {
  campusMatchTags,
  campusGetCampusDepartmentTree,
} from "@/api/modules/career";
export default {
  name: "AcademicListPage",
  data() {
    return {
      clickedResultItem: {},
      cardType: uni.getStorageSync("cardType"),
      selectedLeftDepId: 0,
      selectedRightDepId: 0,
      leftList: [],
      rightList: [],
      keyword: "",
      searchIcon: this.$imgBaseSelf + "common/search.png",
      navHeight: getApp().globalData.navHeight,
      isSearching: false,
      searchResultList: [],
      filterList: [],
      customWrapStyle: {
        maxHeight: "100vh",
        overflow: "hidden",
        minHeight: "auto !important",
      },
    };
  },
  created() {
    this.reqCampusGetClassList();
  },
  methods: {
    reqCampusGetClassList() {
      const params = {
        cardType: this.cardType,
      };
      campusGetCampusDepartmentTree(params)
        .then((res) => {
          if (res.code == 200) {
            this.leftList = res.data;
            this.rightList = this.leftList[0].children;
            this.selectedLeftDepId = this.leftList[0].depId;
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    handleLeftClick(item, index) {
      this.selectedLeftDepId = item.depId;
      this.rightList = item.children;
    },
    handleRightClick(item, rightItem) {
      this.selectedRightDepId = item.depId;
      const topName = this.leftList.find((item) => {
        return item.depId == this.selectedLeftDepId;
      }).depName;
      const parentName = rightItem.depName;
      const contentName = item.depName;
      let positionTag = contentName;
       //if (topName == parentName) {
      //   positionTag = topName + " > " + contentName;
      // } else {
      //   positionTag = topName + " > " + parentName + " > " + contentName;
       //}
      //先保存，还没确认
      this.selectedPositionTag={...item, positionTag};
    },
    handleConfirmClick() {
      uni.setStorageSync("selectedPositionTag", this.selectedPositionTag);
      uni.navigateBack();
    },
    handleSearch(e) {
      if (!e) {
        this.isSearching = false;
        return;
      }
      const params = {
        depName: e,
        pageNo: 1,
        pageSize: 999,
        cardType: this.cardType,
      };
      campusMatchTags(params)
        .then((res) => {
          if (res.code == 200) {
            this.isSearching = true;
            const list = res.data.map((item, index) => {
              return this.changeText(item);
            });
            this.searchResultList = list;
          } else {
          }
        })
        .finally(() => {});
    },
    changeText(item) {
      return this.filterHighlight(item, this.keyword);
    },
    filterHighlight(item, key) {
      //这个是特殊的，不能通用,item并不是三级，是一级
      let textList = item.children[0].children[0].depName.split("");
      let keyList = key.split("");
      let list = [];
      for (let i = 0; i < textList.length; i++) {
        let obj = {
          deep: false,
          val: textList[i],
        };
        list.push(obj);
      }
      for (let k = 0; k < keyList.length; k++) {
        list.forEach((_item) => {
          if (
            _item.val === keyList[k] ||
            _item.val.toLowerCase() === keyList[k].toLowerCase()
          ) {
            _item.deep = true;
          }
        });
      }

      item.filterList = list;
      console.log("item", item);
      item.topName = item.depName;
      item.parentName = item.children[0].depName;
      return item;
    },
    handleResultClick(val) {
      console.log("handleResultClick", val);
      this.clickedResultItem = val;
      this.isSearching = false;
      this.searchResultList = [];
      this.keyword = "";
      this.afterResultClick();
    },
    afterResultClick() {
      this.selectedLeftDepId = this.clickedResultItem.depId;
      this.rightList = this.leftList.find((item) => {
        return item.depId == this.clickedResultItem.depId;
      }).children;
      console.log(this.rightList);

      this.selectedRightDepId =
        this.clickedResultItem.children[0].children[0].depId;
    },
  },
};
</script>

<style lang="scss" scoped>
.Wrapper {
  background-color: white;
  .Title {
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 56rpx;
    color: #333333;
    line-height: 80rpx;
    text-align: left;
    font-style: normal;
    margin: 24rpx 0 0 32rpx;
  }
  .search {
    display: flex;
    padding: 28rpx 32rpx;
    border-radius: 18px;

    ::v-deep.u-content {
      padding: 0 20rpx 0rpx 32rpx;
    }

    ::v-deep.u-close-wrap {
      transform: scale(1.3);
    }

    .library-u-search {
      flex: 1;
      width: 686rpx;
      height: 72rpx;
    }
  }
  .Content {
    display: flex;
    flex-direction: column;
    .ContentInner {
      display: flex;
      .ContentLeft {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 290rpx;
        background: #fafafa;
        .contentLeftInner {
          padding-bottom: 90rpx;
          .ContentLeftItem {
            display: flex;
              align-items: center;
              justify-content: center;
            position: relative;
            max-width: 260rpx;
            height: 130rpx;
            font-family: PingFang-SC, PingFang-SC;
            font-size: 30rpx;
            color: #555555;
            line-height: 38rpx;
            text-align: left;
            font-style: normal;
            padding: 30rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2; /* 设置显示的行数 */
            -webkit-box-orient: vertical;
            &.active {
              color: #f04646;
              &::before {
                content: "";
                position: absolute;
                top: 43rpx;
                left: 0;
                width: 4rpx;
                height: 40rpx;
                background: #f04646;
              }
            }
          }
        }
      }
      .ContentRight {
        padding-left: 4rpx;
        padding-right: 12rpx;
        .ContentRightItem {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          width: 100%;
          padding: 36rpx 0 12rpx;
          .ContentRightItemTitle {
            max-width: 400rpx;
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 36rpx;
            color: #222222;
            line-height: 50rpx;
            text-align: left;
            font-style: normal;
            margin-bottom: 16rpx;
            padding-left: 20rpx;
          }
          .ContentRightItemContent {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            .ContentRightItemContentItem {
              display: flex;
              align-items: center;
              justify-content: center;
              width:calc(45% - 5rpx);
              height: 84rpx;
              padding: 0 15rpx;
              margin: 16rpx 10rpx;
              background-color: #f5f5f5;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #555555;
              line-height: 30rpx;
              text-align: left;
              font-style: normal;
            -webkit-line-clamp: 2; /* 设置显示的行数 */
            -webkit-box-orient: vertical;
              &.active {
                background-color: #fdecec;
                color: #f04646;
              }
            }
          }
        }
      }
    }
    .bottomButton {
      display: flex;
      justify-content: center;
      align-items: center;
      .confirmButton {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 686rpx;
        height: 88rpx;
        background: #f75a3e;
        border-radius: 8rpx;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #ffffff;
        line-height: 30rpx;
        text-align: justify;
        font-style: normal;
        margin-top: 20rpx;
      }
    }
  }
  .searchResult {
    width: 100%;
    background-color: #fff;
    bottom: -120rpx;
    height: calc(100vh - 160rpx);
    overflow: scroll;
    .resultList {
      overflow: scroll;
      padding-bottom: 160rpx;
      .resultItem {
        padding: 36rpx 32rpx;
        border-bottom: 1px solid #f5f5f5;
        &:last-of-type {
          border-bottom: 0;
        }

        .resultTitle {
          font-size: 30rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          line-height: 40rpx;
          margin-bottom: 16rpx;

          .light {
            color: #f75a3e;
          }
        }

        .resultDesc {
          font-size: 26rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #888888;
          line-height: 40rpx;
        }
      }
    }
  }
  .noneResult {
    display: block;
    width: 100%;
    background-color: #fff;
    border-radius: 0rpx 0rpx 8rpx 8rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    z-index: 2;

    .empty_image {
      width: 400rpx;
      height: 400rpx;
      margin: auto;
    }

    .empty-title {
      color: #bfbfbf;
      line-height: 40rpx;
      text-align: center;
      margin-bottom: 100rpx;
    }
  }
}
</style>